<template>
	<view>
		<!-- 商品详情页也是根首页一样的操作 -->
		<goods-list @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list>
		<view class="isOver" v-if="flag">-----我是有底线的-----</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		components: {
			goodsList
		},
		data() {
			return {
				// 页码
				pageindex: 1,
				// 商品数据
				goods: [],
				//控制显示触底提示
				flag: false
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		methods: {
			// 获取商品列表数据
			async getGoodsList(callBack) {
				const res = await this.$myRequest({
					url: '/api/getgoods?pageindex=' + this.pageindex
				})
				this.goods = [...this.goods, ...res.data.message]
				//存在的时候才调 不存在是不会调用的 就是不传递参数嘛 加载的时候 有传递才调用
				// &&  如果表达式1 结果为真 则返回表达式2  如果表达式1 为假 那就返回表达式1
				//|| 如果表达式1 结果为真 则返回表达式1  如果表示式1 为假 那就返回表达式2
				callBack && callBack()
			},
			// 导航到商品详情页
			goGoodsDetail(id) {
				uni.navigateTo({
					url: '/pages/goods-detail/goods-detail?id=' + id
				})
			}
		},
		//上拉加载更多 和生命周期同级
		onReachBottom() {
			//难点就是判断什么时候到底了 就不发送请求了 之后数据的累加 
			//没有返回总数据 只能判断当前的goods数据 小于 页码*页数 的数据 那就是请求到底了这就不在发送请求了
			//数据的累积通过展开运算符来实现 拼接 
			if (this.goods.length < this.pageindex * 10) {
				return this.flag = true
			}
			//没有到底就累积页码 继续发送请求 调用函数
			this.pageindex++
			this.getGoodsList()
		},
		// 下拉加载更多 有全局开启和局部开启 局部就在当前页加上 全局就在全局配置加上
		//难点：下拉刷新最新的第一页数据 什么时候清除加载样式 数据跳转太块如何解决 
		//清空数组 加载成功后就调用关闭方法 在请求结束的时候关闭 这里要区分好是那个根那个不能乱  所以 在
		//定义器传递一个回调函数过去 存在就调 不存在就不调 数据跳转太块加个定时器就好
		onPullDownRefresh() {
			this.pageindex = 1
			this.goods = []
			this.flag = false //true显示 false 不显示
			setTimeout(() => {
				//一次性定时器
				this.getGoodsList(() => {
					//调用获取数据的时候 也顺带的传递一个回调进行关闭 
					uni.stopPullDownRefresh()
				})
			}, 1000)
		}
	}
</script>

<style lang="scss">
	.goods_list {
		background: #eee;
	}

	.isOver {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		// background: #fff;
		font-size: 28rpx;
	}
</style>
